<template>
  <div class="login_body">
    <div class="bg" />
    <div class="box">
      <div class="title">智慧园区-登录</div>
      <!-- :model="表单数据对象" :rules="规则对象"  prop="规则绑定" -->
      
      <!-- <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="账号" prop="username">
          <el-input v-model="form.username" />
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" type=""/>
        </el-form-item>

        <el-form-item  prop="remember">
          <el-checkbox v-model="checked">记住我</el-checkbox>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" class="login_btn" @click="login">登录</el-button>
        </el-form-item>
      </el-form> -->
      
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" />
        </el-form-item>

        <!-- <el-form-item label="银行卡号" prop="banknum">
          <el-input v-model="form.banknum" />
        </el-form-item> -->

        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" type="password"/>
        </el-form-item>

        <el-form-item  prop="remember">
          <el-checkbox v-model="checked">记住我</el-checkbox>
        </el-form-item>

      

        <el-form-item>
          <el-button type="primary" class="login_btn" @click="login" >{{buttonText}}</el-button>
        </el-form-item>
      </el-form>
    </div>
    
  </div>
</template>

<script>
  import {
    loginAPI
  } from '@/api/user'
  const Base64 = require("js-base64").Base64
  console.log(Base64, 999)
  export default {

    name: 'Login',
    data() {
      return {
        form: {
          username: '',
          // banknum:'',
          password: ''
        },
        
        checked: false,
        buttonText:'登录',
        rules: { //对象里有几个属性就几个规则
          username: [
            // 非空校验，失去焦点时检查用户有没有填写用户名 如果没有 则给出提示 trigger:'blur'失去焦点
            {
              required: true,
              message: '用户名必须填写！',
              trigger: 'blur'
            },
            // 长度校验 必须是5-12位的字符
            {
              min: 5,
              max: 12,
              message: '用户名必须5-12位！',
              trigger: 'blur'
            }
          ],
          password: [
            // 非空校验，失去焦点时检查用户有没有填写密码 如果没有 则给出提示
            {
              required: true,
              message: '密码必须填写！',
              trigger: 'blur'
            },
            // 长度校验 必须是5-12位的字符
            {
              min: 6,
              // max: 12,
              message: '密码必须6位以上！',
              trigger: 'blur'
            }
          ],
          // banknum: [
          //   // 非空校验，失去焦点时检查用户有没有填写用户名 如果没有 则给出提示 trigger:'blur'失去焦点
          //   {
          //     required: true,
          //     message: '银行卡号必须填写！',
          //     trigger: 'blur'
          //   },
          //   // 长度校验 必须是5-12位的字符
          //   {
          //     min: 16,
          //     max: 16,
          //     message: '银行卡号必须为16位！',
          //     trigger: 'blur'
          //   }
          // ]
        }
      }
    },
    mounted() {
      const temp = localStorage.getItem('form')
      if (temp) {
        this.form.username = JSON.parse(temp).username
        // base64解密
        let password = JSON.parse(temp).password
        // console.log(password, Base64.decode(password))
        this.form.password = Base64.decode(password)
        
        // this.form.banknum = localStorage.getItem("banknum");
        this.checked = true;
      }
    },

    methods: {
      login() {
        console.log(this.form);
        // this.$refs.名字 => 拿到组件 =>调用组件的方法 validate
        this.$refs.form.validate((ok) => {
          if (ok) {
            // 改变按钮内容
            // this.buttonText = '1000元'
            // 校验通过才可以进行请求
            loginAPI(this.form).then((res) => {
              console.log(res.data.token);
              //如何调用仓库的函数 this.$store.commit('模块/函数',携带的数据)
              this.$store.commit('user/setToken',res.data.token)
              this.$router.push('/')
              this.$message.success('恭喜登录成功！')
               /* ------ 账号密码的存储 ------ */
              if (this.checked) {
                // base64加密
              this.form.password = Base64.encode(this.form.password); 
             
              localStorage.setItem('form',JSON.stringify(this.form))
             
              // localStorage.setItem("banknum", this.form.banknum);  
            } else {
              localStorage.removeItem("username");
              // localStorage.removeItem("banknum");
              localStorage.removeItem("password");
            }
            })
           
          } 
          else {
            console.log("error submit!!");
            return false;
          }
        })

      },
     

    }

  }
</script>

<style scoped lang="scss">
  .login_body {
    display: flex;
  }

  .bg {
    width: 60vw;
    height: 100vh;
    background: url('~@/assets/login-bg.svg') no-repeat;
    background-position: right top;
    background-size: cover;
  }

  .box {
    margin: 200px 10% 0;
    flex: 1;

    .title {
      padding-bottom: 76px;
      font-size: 26px;
      font-weight: 500;
      color: #1e2023;
    }

    ::v-deep() {
      .ant-form-item {
        display: flex;
        margin-bottom: 62px;
        flex-direction: column;
      }

      .ant-form-item-label label {
        font-size: 16px;
        color: #8b929d;
      }

      .ant-input,
      .ant-input-password {
        border-radius: 8px;
      }
    }
  }

  .login_btn {
    width: 100%;
  }
</style>